<template>
    <el-row class="contain-box">
        <site-nav/>
        <div class="view-body">
            <el-row>
                <el-form class="inline-form" inline>
                    <el-form-item>
                        <el-button @click="addEntity" type="primary"><i class="el-icon-plus el-icon--left"/>添加用户标签
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-col>
                    <el-table :data="list" border size="small">
                        <el-table-column align="center" label="用户标签Id" prop="tagId" width="150"/>
                        <el-table-column align="center" label="用户标签名称" prop="tagName" />
                        <el-table-column align="center" label="排序" prop="orderNum" width="60"/>
                        <el-table-column align="center" label="操作" width="160">
                            <template slot-scope="scope">
                                <el-button @click="updateEntity(scope.row)" size="mini" type="primary">修改</el-button>
                                <el-button @click="deleteEntity(scope.row)" size="mini" type="danger">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-row>
                <el-col class="pagination">
                    <el-pagination :current-page="params.pageId" :page-size="params.pageSize" :total="count"
                                   @current-change="currentChange" background layout="total, prev, pager, next"/>
                </el-col>
            </el-row>
        </div>
        <el-dialog :before-close="dialogClose" :title="dialog.isAdd ? '新增用户标签' : '修改用户标签'" :visible.sync="dialog.show"
                   class="dialog">
            <el-form :model="info" :rules="rules" label-width="120px" ref="form" size="small">
                <el-form-item :required="true" label="用户标签名称" prop="tagName">
                    <el-input type="text" v-model="info.tagName"/>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input type="number" v-model="info.orderNum"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="dialogClose" size="mini">取 消</el-button>
                <el-button :loading="dialog.submitting" @click="dialogSubmit" size="mini" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script lang="ts">
  import {PARAMS} from '@/api/http';
  import DialogInfo from '@/structure/dialogInfo';
  import FormRules from '@/structure/formRules';
  import {ElForm} from 'element-ui/types/form';
  import {Component, Vue} from 'vue-property-decorator';
  import UserTagApi from '../../api/userTagApi';
  import UserTag from '../../structure/userTag';

  @Component
  export default class Page extends Vue {
    public list: UserTag[] = [];
    public count: number | null = null;
    public params: PARAMS = {
      pageId: 1
    };
    public dialog: DialogInfo = new DialogInfo();
    public info: UserTag = new UserTag();
    public rules: FormRules = {
      tagName: [
        {
          required: true,
          message: '请输入用户标签名称'
        }
      ]
    };

    public get form(): ElForm {
      return this.$refs.form as ElForm;
    }

    public created(): void {
      this.$parseParams(this.params, this.$route);

      UserTagApi.findList(this.params).then((res) => {
        this.list = res.list;
        this.count = res.count;
      });
    }

    public search(): void {
      this.currentChange(1);
    }

    public getDataList(): void {
      const str = this.$formatParamsUrl(this.params);
      UserTagApi.findList(this.params).then((res) => {
        this.$router.push(str);
        this.list = res.list;
        this.count = res.count;
      });
    }

    public currentChange(val: number): void {
      this.params.pageId = val;
      this.getDataList();
    }

    public addEntity(): void {
      this.dialog.isAdd = true;
      this.dialog.show = true;
      this.info = new UserTag();
      this.rules.tagName[0].required = true;
    }

    public updateEntity(info: UserTag): void {
      this.info = {...info};

      this.dialog.isAdd = false;
      this.dialog.show = true;
      this.rules.tagName[0].required = false;
    }

    public deleteEntity(info: UserTag): void {
      this.$confirm('是否删除该用户标签?', '删除用户标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        UserTagApi.delete(info.tagId).then(() => {
          this.getDataList();
          this.$message.success('删除成功!');
        });
      });
    }

    public dialogClose(): void {
      this.dialog.show = false;
      this.info = new UserTag();
      this.form.resetFields();
    }

    public dialogSubmit(): void {
      this.form.validate((valid) => {
        if (!valid) {
          return false;
        }

        this.dialog.submitting = true;

        const func = this.dialog.isAdd ? UserTagApi.save : UserTagApi.update;
        const msg = this.dialog.isAdd ? '添加用户标签成功' : '编辑用户标签成功';

        func.call(UserTagApi, this.info).then(() => {
          this.getDataList();
          this.dialogClose();
          this.dialog.submitting = false;
          this.$message.success(msg);
        }).catch(() => {
          this.dialog.submitting = false;
        });
      });
    }
  }
</script>
